<!-- *ngIf指令
<div *ngIf="selectedHero">
  内置管道 UppercasePipe
  <h2>{{selectedHero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      [(ngModel)]  双向绑定的Angular指令, 默认情况下不可用.需要在'app.module.ts'中导入FormsModule
      <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
  </div>
</div> -->

<h2>My Heroes</h2>
<div>
  <label>Hero name:
    <input #heroName />
  </label>
  <!-- (click) passes input value to add() and then clears the input -->
  <button (click)="add(heroName.value); heroName.value=''">
    add
  </button>
</div>
<ul class="heroes">
  <!-- 复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素 -->
  <!-- (click) 事件绑定 (click)="onSelect(hero)"-->
  <!-- 动态样式类名 [class.selected]="hero === selectedHero"-->
  <li *ngFor="let hero of heroes">
    <a routerLink="/detail/{{hero.id}}">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </a>
    <button class="delete" title="delete hero" (click)="delete(hero)">x</button>
  </li>
</ul>

<!-- [hero] 属性绑定 -->
<!-- <app-hero-detail [hero]="selectedHero"></app-hero-detail> -->